<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>豆瓣一刻</title>
	<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
	<link rel="stylesheet" href="./less/main.css">
</head>
<body>
	<div class="viewport">
		<div class="navs">
			<dl>
				<dt class="login">
					<div class="avatar">
						<img src="./images/avatar.png" alt="">
					</div>
					<span>登录</span>
				</dt>
				<dd class="active">
					<a href="javascript:;" class="icon-home">
						<span>今日一刻</span>
					</a>
				</dd>
				<dd>
					<a href="javascript:;" class="icon-file-empty">
						<span>往期内容</span>
					</a>
				</dd>
				<dd>
					<a href="javascript:;" class="icon-pencil">
						<span>热门作者</span>
					</a>
				</dd>
				<dd>
					<a href="javascript:;" class="icon-menu">
						<span>栏目浏览</span>
					</a>
				</dd>
				<dd>
					<a href="javascript:;" class="icon-heart">
						<span>我的喜欢</span>
					</a>
				</dd>
				<dd>
					<a href="javascript:;" class="icon-cog">
						<span>设置</span>
					</a>
				</dd>
			</dl>
			<div class="extra">
				<a href="javascript:;" class="icon-image">夜晚</a>
				<a href="javascript:;" class="icon-download">离线</a>
			</div>
		</div>
		<div class="container">
			<!-- 头部 -->
			<div class="header">
				<a href="javascript:;" class="menu icon-menu"></a>
				<h2>栏目浏览</h2>
				<a href="javascript:;" class="search icon-search"></a>
			</div>
			<!-- 主体 -->
			<div class="body">
				<ul class="category">
					<li>
						<a href="javascript:;">
							<img src="./images/IMG_0269_07.gif" alt="">
							<h5>热门精选</h5>
							<p>收录“一刻”最受欢迎内容</p>
						</a>
					</li>
					<li>
						<a href="javascript:;">
							<img src="./images/IMG_0269_09.gif" alt="">
							<h5>打鸡血</h5>
							<p>每日段子，提神醒脑</p>
						</a>
					</li>
					<li>
						<a href="javascript:;">
							<img src="./images/IMG_0269_17.gif" alt="">
							<h5>洗洗睡</h5>
							<p>睡前静静，做个好梦</p>
						</a>
					</li>
					<li>
						<a href="javascript:;">
							<img src="./images/IMG_0269_19.gif" alt="">
							<h5>爱美丽</h5>
							<p>时尚穿衣护肤美发全搜罗</p>
						</a>
					</li>
					<li>
						<a href="javascript:;">
							<img src="./images/IMG_0269_27.gif" alt="">
							<h5>闲翻书</h5>
							<p>书里书外，感受阅读之美</p>
						</a>
					</li>
					<li>
						<a href="javascript:;">
							<img src="./images/IMG_0269_29.gif" alt="">
							<h5>看电影</h5>
							<p>推荐电影，分享影评</p>
						</a>
					</li>
					<li>
						<a href="javascript:;">
							<img src="./images/IMG_0269_37.gif" alt="">
							<h5>听音乐</h5>
							<p>新砖好碟，乐史八卦</p>
						</a>
					</li>
					<li>
						<a href="javascript:;">
							<img src="./images/IMG_0269_39.gif" alt="">
							<h5>聊艺术</h5>
							<p>门槛其实没那么高</p>
						</a>
					</li>
					<li>
						<a href="javascript:;">
							<img src="./images/IMG_0269_47.gif" alt="">
							<h5>他们在聊什么</h5>
							<p>回贴里面有精华</p>
						</a>
					</li>
					<li>
						<a href="javascript:;">
							<img src="./images/IMG_0269_49.gif" alt="">
							<h5>哈哈</h5>
							<p>没心没肺笑一笑</p>
						</a>
					</li>
					<li>
						<a href="javascript:;">
							<img src="./images/IMG_0275_07.gif" alt="">
							<h5>假日厨房</h5>
							<p>精选菜谱，享受假日生活</p>
						</a>
					</li>
					<li>
						<a href="javascript:;">
							<img src="./images/IMG_0275_09.gif" alt="">
							<h5>食记</h5>
							<p>舌尖上的时光</p>
						</a>
					</li>
					<li>
						<a href="javascript:;">
							<img src="./images/IMG_0275_17.gif" alt="">
							<h5>玩手机</h5>
							<p>新设备，新应用</p>
						</a>
					</li>
					<li>
						<a href="javascript:;">
							<img src="./images/IMG_0275_19.gif" alt="">
							<h5>生活家</h5>
							<p>你可以过的更精致</p>
						</a>
					</li>
					<li>
						<a href="javascript:;">
							<img src="./images/IMG_0275_27.gif" alt="">
							<h5>去远方</h5>
							<p>旅行见闻，带你看远处风景</p>
						</a>
					</li>
					<li>
						<a href="javascript:;">
							<img src="./images/IMG_0275_29.gif" alt="">
							<h5>海外志</h5>
							<p>异国生活记录</p>
						</a>
					</li>
					<li>
						<a href="javascript:;">
							<img src="./images/IMG_0275_37.gif" alt="">
							<h5>冷知识</h5>
							<p>不一定有用，但是有趣</p>
						</a>
					</li>
					<li>
						<a href="javascript:;">
							<img src="./images/IMG_0275_39.gif" alt="">
							<h5>萌</h5>
							<p>维护世界和平，全靠卖萌</p>
						</a>
					</li>
					<li>
						<a href="javascript:;">
							<img src="./images/IMG_0275_47.gif" alt="">
							<h5>连载</h5>
							<p>精彩内容，分批装载</p>
						</a>
					</li>
					<li>
						<a href="javascript:;">
							<img src="./images/IMG_0275_49.gif" alt="">
							<h5>鬼敲门</h5>
							<p>其实没那么可怕</p>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<script>
		// 非常粗糙的实现
		var menu = document.querySelector('.menu');
		var container = document.querySelector('.container');
		var navs = document.querySelector('.navs');
		var dd = navs.querySelectorAll('dd');

		menu.onclick = function () {
			container.classList.toggle('pull-right');
			navs.classList.toggle('pull-right');

			if(!this.classList.contains('collapsed')) {
				for(var i=0; i<dd.length; i++) {
					dd[i].style.transitionDuration = (i + 1) * 0.15 + 's';
					dd[i].style.transitionProperty = 'all';
					dd[i].style.transitionDelay = '0.2s';
					dd[i].style.transitionTimingFunction = 'ease-out';
					dd[i].style.transform = 'translate(0)';
				}
			} else {
				for(var i=dd.length - 1; i>=0; i--) {
					dd[i].style.transitionDuration = (dd.length - i + 1) * 0.05 + 's';
					dd[i].style.transitionProperty = 'all';
					dd[i].style.transitionDelay = '';
					dd[i].style.transitionTimingFunction = 'ease-out';
					dd[i].style.transform = 'translate(-100%)';
				}
			}

			this.classList.toggle('collapsed');
		}
	</script>
</body>
</html>